<template>
    <div>
        <span ref="ref" v-if="name === 'kahoohak'">{{ name }}</span>
        <span>{{ $store.getters["userInfo/welcome"] }}</span>
        <button @click="changeAdmin">changeAdmin</button>
        <Father v-if="show" />
        <button @click="destory">卸载father</button>
        <img :src="require(`../assets/${img}.png`)" alt="">
    </div>
</template>
<script>
import Father from "./Father.vue";

export default {
    components: {
        Father,
    },

    data() {
        return {
            name: "kaho",
            age: 18,
            show: true,
            img: 'default'
        };
    },

    computed: {
        user: {
            get() {
                return this.name + " age is " + this.age;
            },
            set() {
                // console.log('setter')
                this.name = "kkkk";
            },
        },
    },

    watch: {
        // user(newVal) {
        // console.log('最新值', newVal)
        // }
    },

    methods: {
        changeAdmin() {
            this.$store.commit("userInfo/changeAdmin", "kahoohak");
        },

        destory() {
            this.show = false
        }
    },

    mounted() {
        this.user = "user";
        // console.log(this.user)
    },
};
</script>
<style scoped>
</style>